class SdkCust extends React.Component {

    constructor(props) {
        super(props);
        this.pageCount = 0;
        this.state = {
            customers: [],
            menuList: [],
            allMenuList: null,
            custDef: ''
        };
        this.tableRef = null;
    }

    componentDidMount() {
        this.updatePage(1, 10);
    }

    customId() {
        function S4() {
            return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
        }

        return (S4() + S4() + S4());
    }

    updatePage(page, pageSize) {
        let params = {
            page: page,
            pageSize: pageSize
        };
        postJson("/customer/querySdkCustPage.x", params, (data) => {
            this.pageCount = data.data.size;
            this.setState({customers: data.data.list});
        })
    }

    addSdkCust(cust) {
        this.refs.customId.value = cust ? cust.customId : this.customId();
        this.refs.customName.value = cust ? cust.customName : '';
        this.refs.isEnable.value = cust ? cust.isEnable : "1";
        this.refs.androidPackageName.value = cust ? cust.androidPackageName : '';
        this.refs.IOSPackageName.value = cust ? cust.IOSPackageName : '';
        this.refs.xingeIOSKey.value = cust ? cust.xingeIOSKey : '';
        this.refs.xingeIOSSecret.value = cust ? cust.xingeIOSSecret : '';
        this.refs.xingeAndroidKey.value = cust ? cust.xingeAndroidKey : '';
        this.refs.xingeAndroidSecret.value = cust ? cust.xingeAndroidSecret : '';

        this.refs.sdkModal.show({value: cust});
    }

    assignModal(cust) {
        if (this.state.allMenuList) {
            postJson("/customer/getPermsOfCustomId.x", {id: cust.customId}, (roleMenus) => {
                let menuListOrdered = [];
                reorderParentsPermission(this.state.allMenuList, null, menuListOrdered, "menuPar", "menuCode");
                menuListOrdered = menuListOrdered.reverse();
                this.pageData = menuListOrdered;
                this.refs.tableModal.checkboxValue = roleMenus.data;
                this.tableRef = this.refs.tableModal;
                this.refs.tableModal.removeTreeTable();
                this.state.custDef = cust;
                this.setState({menuList: menuListOrdered}, () => {
                    this.refs.assignModal.show();
                });
            })
        } else {
            postJson("/menu/query.x", null, (data) => {
                this.state.allMenuList = data.data;
                postJson("/customer/getPermsOfCustomId.x", {id: cust.customId}, (roleMenus) => {
                    let menuListOrdered = [];
                    reorderParentsPermission(data.data, null, menuListOrdered, "menuPar", "menuCode");
                    menuListOrdered = menuListOrdered.reverse();
                    this.pageData = menuListOrdered;
                    this.refs.tableModal.checkboxValue = roleMenus.data;
                    this.tableRef = this.refs.tableModal;
                    this.refs.tableModal.removeTreeTable();
                    this.state.custDef = cust;
                    this.setState({menuList: menuListOrdered}, () => {
                        this.refs.assignModal.show();
                    });
                })
            });
        }
    }

    cancel() {
        this.refs.assignModal.close();
    }

    assignMenu() {
        let menus = this.refs.tableModal.checkboxValue;
        let menuCodes = [];
        for (let i = 0; i < menus.length; i++) {
            if (menus[i].type === 1) {
                menuCodes.push(menus[i].menuCode);
            }
        }
        postAJson("/customer/saveCustomerPerms.x", {customId: this.state.custDef.customId, menuCodes: menuCodes}, () => {
            layui.layer.msg("保存成功");
        })
    }

    saveCust() {
        let cust = this.refs.sdkModal.value;
        let params = {
            customId: this.refs.customId.value,
            customName: this.refs.customName.value,
            isEnable: this.refs.isEnable.value,
            androidPackageName: this.refs.androidPackageName.value,
            IOSPackageName: this.refs.IOSPackageName.value,
            xingeIOSKey: this.refs.xingeIOSKey.value,
            xingeIOSSecret: this.refs.xingeIOSSecret.value,
            xingeAndroidKey: this.refs.xingeAndroidKey.value,
            xingeAndroidSecret: this.refs.xingeAndroidSecret.value,
        };

        if (cust) {
            params.modify = true;
            params.id = cust.id;
        }

        postJson("/customer/save.x", params, () => {
            layui.layer.msg("操作客户成功!");
            this.refs.table.refresh();
            this.refs.sdkModal.close();
        })
    }

    delete(id) {
        layui.layer.confirm("确定要删除此客户么?", () => {
            postJson("/customer/deleteCustomer.x", {id: id}, () => {
                layui.layer.msg("删除客户成功!");
                this.refs.table.refresh();
            })
        });
    }

    render() {
        return (
            <Frame header="SDK客户列表" headerBtns={<HeaderBtn onClick={() => this.addSdkCust()}>新增客户</HeaderBtn>}>
                <Table count={this.pageCount} pageOnClick={(page, pageSize) => this.updatePage(page, pageSize)}
                       ref="table">
                    <thead>
                    <tr>
                        <th>客户ID</th>
                        <th>客户名称</th>
                        <th>是否启用客户ID</th>
                        <th>android包名</th>
                        <th>IOS包名</th>
                        <th>信鸽IOS APPID</th>
                        <th>信鸽IOS secret</th>
                        <th>信鸽android APPID</th>
                        <th>信鸽android secret</th>
                        <th>操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    {
                        this.state.customers.length > 0 ? this.state.customers.map((cust) => {
                            return (
                                <tr>
                                    <td>{cust.customId}</td>
                                    <td>{cust.customName}</td>
                                    <td>{cust.isEnable}</td>
                                    <td>{cust.androidPackageName}</td>
                                    <td>{cust.IOSPackageName}</td>
                                    <td>{cust.xingeIOSKey}</td>
                                    <td>{cust.xingeIOSSecret}</td>
                                    <td>{cust.xingeAndroidKey}</td>
                                    <td>{cust.xingeAndroidSecret}</td>
                                    <td>
                                        <Button className="layui-btn layui-btn-xs layui-btn-normal"
                                                onClick={() => this.assignModal(cust)}>权限</Button>
                                        <Button className="layui-btn layui-btn-xs"
                                                onClick={() => this.addSdkCust(cust)}>修改</Button>
                                        <Button className="layui-btn layui-btn-xs layui-btn-danger"
                                                onClick={() => this.delete(cust.id)}>删除</Button>
                                    </td>
                                </tr>
                            )
                        }) : ''
                    }
                    </tbody>
                </Table>

                <Modal title="新增SDK客户" ref="sdkModal">
                    <Form size="sm" type="pane">
                        <Item>
                            <Label width="hg">客户id</Label>
                            <Input ref="customId"/>
                        </Item>
                        <Item>
                            <Label width="hg">客户名称</Label>
                            <Input ref="customName" lay-verify="required"/>
                        </Item>
                        <Item>
                            <Label width="hg">android包名</Label>
                            <Input ref="androidPackageName"/>
                        </Item>
                        <Item>
                            <Label width="hg">IOS包名</Label>
                            <Input ref="IOSPackageName"/>
                        </Item>
                        <Item>
                            <Label width="hg">信鸽IOS APPID</Label>
                            <Input ref="xingeIOSKey"/>
                        </Item>
                        <Item>
                            <Label width="hg">信鸽IOS secret</Label>
                            <Input ref="xingeIOSSecret"/>
                        </Item>
                        <Item>
                            <Label width="hg">信鸽安卓 APPID</Label>
                            <Input ref="xingeAndroidKey"/>
                        </Item>
                        <Item>
                            <Label width="hg">信鸽安卓 secret</Label>
                            <Input ref="xingeAndroidSecret"/>
                        </Item>
                        <Item>
                            <Label width="hg">是否启用</Label>
                            <Select ref="isEnable" lay-verify="required">
                                <option value="1">启用</option>
                                <option value="0">禁用</option>
                            </Select>
                        </Item>
                        <Item>
                            <Button className="layui-btn layui-btn-sm layui-form-btn" style={{marginLeft: 150}}
                                    onClick={() => this.saveCust()} lay-submit="true">确定</Button>
                        </Item>
                    </Form>
                </Modal>
                <Modal title="分配权限" ref="assignModal" disableOverFlow={true}>
                    <Form>
                        <Table expandable="true" ref="tableModal" pageData={this.pageData} checkboxKeyname="menuCode"
                               size="sm"
                               toolbar={
                                   [
                                       <Button className="layui-btn" onClick={() => this.assignMenu()}>确认分配</Button>,
                                       <Button className="layui-btn layui-btn-normal"
                                               onClick={() => this.cancel()}>取消</Button>
                                   ]
                               }>
                            <thead>
                            <tr>
                                <th width={70}>
                                    <i className="fa fa-chevron-up" onClick={()=>{this.refs.tableModal.collapseAll()}}/>&nbsp;&nbsp;&nbsp;&nbsp;
                                    <i className="fa fa-chevron-down" onClick={()=>{this.refs.tableModal.expandAll()}}/>
                                </th>
                                <th>菜单名称</th>
                                <th>菜单级别</th>
                                <th>权限字串</th>
                            </tr>
                            </thead>
                            <tbody>
                            {
                                this.state.menuList.length > 0 ? this.state.menuList.map((menu) => {
                                    return (
                                        <tr data-tt-id={menu.menuCode} data-tt-parent-id={menu.menuPar}>
                                            <td>&nbsp;{menu.type === 1 ? <TCheckbox keyname="menuCode" data={menu}
                                                                 tableRef={this.tableRef}/> : ''}</td>
                                            <td>{menu.type !== 0 ? <i className="fa fa-key"
                                                                      style={{marginRight: 5}}/> : ''}{menu.menuName}</td>
                                            <td>{menu.menuLev}</td>
                                            <td>{menu.permission}</td>
                                        </tr>
                                    )
                                }) : ''
                            }
                            </tbody>
                        </Table>
                    </Form>
                </Modal>
            </Frame>
        );
    }
}

ReactDOM.render(<SdkCust/>, document.getElementById("sdkCust"));